<template>
  	<button class="downCountButton" 
            @click="downCountGo"
            v-text="downCountText"
            :disabled="downCountGoOrNot">
    </button>
</template>

<script>
export default {
  	data() {
		return {
            downCountText:'获取验证码',
            downCountGoOrNot:false
		};
  	},
	methods:{
		downCountGo(){
            var totalTime = 60;
            this.downCountText = 60 + 's';
            this.downCountGoOrNot = true;
            var _this = this;
            var downCountBegin = setInterval(function(){
                if(totalTime > 0){
                    totalTime -= 1;
                    _this.downCountText = totalTime + 's';
                }else{
                    _this.downCountText = "获取验证码";
                    _this.downCountGoOrNot = false;
                    clearInterval(downCountBegin);
                }
            },1000);
        }
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .downCountButton{
        width: 120px;
        height: 40px;
        color: #666;
        background-color: #fff;
        border: 1px solid #bfcbd9;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 0;
        font-size: 14px;
    }
</style>

